<template>
    <div style="overflow:hidden">
        <section class="content-header">
            <div class="title clearfix">
                <div style="float:left;">首页
                    <span style="padding:0 5px">></span>
                    <router-link :to="{path:'carsmanage'}">
                        车辆管理</router-link>
                    <i class="fa fa-angle-right fa-1x" aria-hidden="true"></i> 添加车辆</div>
            </div>
        </section>
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 车牌号码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车牌号码" v-model="insertcarData.carNo">
                            </div>
                        </div>
                        <carType v-model="insertcarData.carType" :msg="insertcarData.carType" />
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 车辆颜色：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车牌颜色" v-model="insertcarData.carColor">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">车辆品牌：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车辆品牌" v-model="insertcarData.carBrand">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">发动机号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入发动机号" v-model="insertcarData.engineNumber">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">车架号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车架号" v-model="insertcarData.carFrame">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">当前里程：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入当前里程" v-model="insertcarData.carMileage">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 机器编码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入机器编码" v-model="insertcarData.machineNum">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> SIM卡号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入SIM卡号" v-model="insertcarData.simno">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注：</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" rows="4" placeholder="请输入备注" v-model="insertcarData.carRemark" maxlength="80"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error">
                    <div class="box-body">
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.carNo && !insertcarData.carNo) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入车牌号码</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.carType && !insertcarData.carType) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择车辆类型</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.carColor && !insertcarData.carColor) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入车辆颜色</span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.machineNum && !insertcarData.machineNum) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入机器编码</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.simno && !insertcarData.simno) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入SIM卡号</span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box-body">
                        <deptlist v-model="insertcarData.deptid" :msg="insertcarData.deptid" />
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 车辆管理员名字：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车辆管理员名字" v-model="insertcarData.driver">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 联系电话：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入联系电话" v-model="insertcarData.dervermobile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">驾驶证号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入驾驶证号" v-model="insertcarData.driverNumber">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">驾驶证类型：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入驾驶证类型" v-model="insertcarData.driverType">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">上传照片：</label>
                            <div class="col-sm-8" :class="{hiddenIcon: fileList.length>0}">
                                <el-upload :action="uploadUrl" :file-list="fileList" list-type="picture-card" :on-success='handleSuccess' :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error">
                    <div class="box-body">
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.deptid && !insertcarData.deptid) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择使用部门</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.driver && !insertcarData.driver) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入车辆管理员名字</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.dervermobile && !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.insertcarData.dervermobile)) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系电话</span>
                        </div>

                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4" style="text-align: center">
                        <button type="button" class="btn btn-info" style="margin-right:250px" @click="getInsertcar">添加</button>
                        <!-- <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">取消</button> -->
                        <button type="button" class="btn btn-default" @click="$router.push({ path: 'carsmanage'})">取消</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <!-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="carsmanage">
                                    <button type="button" class="btn btn-block btn-info" data-dismiss="modal">确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div> -->
            </form>
        </div>
    </div>
</template>

<script>
import deptlist from "@/components/common/deptlist.vue";
import carType from "@/components/common/carType.vue";

export default {
    data() {
        return {
            valid: {
                carNo: false,
                carType: false,
                carColor: false,
                machineNum: false,
                dervermobile: false,
                simno: false,
                deptid: false,
                driver: false,
            },
            uploadUrl: `${window.apiPrefix}api/car/uploadImage`,
            dialogImageUrl: "",
            dialogVisible: false,
            fileList: [],
            insertcarData: {
                carNo: "",
                carColor: "",
                carType: "",
                machineNum: "",
                simno: "",
                deptid: "",
                driver: "",
                dervermobile: "",
                carBrand: "",
                engineNumber: "",
                carFrame: "",
                carMileage: "",
                driverNumber: "",
                driverType: "",
                carRemark: "",
                photopath: ""
            }
        };
    },
    components: {
        deptlist,
        carType
    },
    watch: {
        fileList() {
            // console.log(this.fileList);
            if (this.insertcarData.photopath == '') {
                this.insertcarData.photopath = this.fileList[0].response.data;
            }else{
                this.insertcarData.photopath = ''
            }
            // console.log(this.insertcarData.photopath);
            // this.fileList.forEach(item => {
            //     this.insertcarData.photopath += `${item.response.data},`;
            // });
            // this.insertcarData.photopath = this.insertcarData.photopath.substr(
            //     0,
            //     this.insertcarData.photopath.length - 1
            // );
            // console.log(this.insertcarData.photopath.substr(0, this.insertcarData.photopath.length - 1));
        }
    },
    methods: {
        validFn(msg) {
            // console.log(this.valid.orderName)
            // if (this.valid[formName] === undefined) {
            //     this.$set(this.valid, formName, true);
            // }
            this.valid[msg] = true;
        },
        selectDate() {
            $("#datepicker").datepicker({
                autoclose: true
            });
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
            console.log(this.fileList)
        },
        getInsertcar() {
            // console.log(this.insertcarData)
            if (this.insertcarData.carNo == "") {
                this.valid.carNo = true;
            } else if (this.insertcarData.carType == "") {
                this.valid.carType = true;
            } else if (this.insertcarData.carColor == "") {
                this.valid.carColor = true;
            } else if (this.insertcarData.machineNum == "") {
                this.valid.machineNum = true;
            } else if (this.insertcarData.simno == "") {
                this.valid.simno = true;
            } else if (this.insertcarData.deptid == "") {
                this.valid.deptid = true;
            } else if (this.insertcarData.driver == "") {
                this.valid.driver = true;
            } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.insertcarData.dervermobile)) {
                this.valid.dervermobile = true;
            } else {
                this.$api.cars.home.insertcar(this.insertcarData).then(res => {
                    if (res.success) {
                        // console.log(res);
                        this.$$message({
                            message: "恭喜您，添加成功！",
                            type: "success"
                        });
                        this.$router.push({ path: "carsmanage" });
                    }
                });
                // console.log(this.insertcarData)
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
input,
select,
textarea {
  border-radius: 5px;
}
.control-label {
  padding: 0;
  height: 34px;
  line-height: 34px;
}
.content-header {
  border-bottom: 1px solid black;
  padding-bottom: 15px;
  .title {
    font-weight: bolder;
  }
}
.modal-body {
  padding: 50px 0;
  text-align: center;
  i {
    font-size: 40px;
    margin-bottom: 20px;
    color: #3c8dbc;
  }
}
.modal-header {
  background: #3c8dbc;
  span {
    line-height: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: white;
    margin-top: 10px;
    border-radius: 50%;
  }
}
.btn-block {
  width: 60px;
  background: #3c8dbc;
  float: right;
}
.fa-asterisk {
  font-size: 1px;
  color: red;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.hiddenIcon {
  .el-upload--picture-card {
    display: none;
  }
}
input[type="file"] {
  display: none;
}
</style>
